<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #pay{
            margin: 30px;
            float: right;
        }
        #app{
            width: 1080px;
            margin: 0 auto;
        }
        a{
            font-size: 20px;
            text-decoration: none;
            color: black;
        }

    </style>
</head>
<body>
<div id="app">
    <el-header height="150px">
        <div style="width:1080px;height:100px; margin: 0 auto;">
            <div style="float: left"><img src="./imgs/logo.png"
                                          style="width: 400px;height:100px;vertical-align: middle" alt=""></div>

            <div style="float: right;font-size: 15px;position: relative;right: 30px"><span >欢迎xxx回来 </span></div>
            <div style="float: right;position: absolute;top: 50px;right: 250px">
                <a href="">购物车</a><el-divider direction="vertical"></el-divider>
                <a href="">我的账户</a><el-divider direction="vertical"></el-divider>
                <a href="">新用户注册</a><el-divider direction="vertical"></el-divider>
                <a href="">我要登录</a><el-divider direction="vertical"></el-divider>
                <a href="">帮助中心</a></el-divider>
            </div>
        </div>
        <!--导航菜单开始-->
        <div>
            <el-menu style="background-color: #f3f0b5;width: 1050px"
                     :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-menu-item index="2">处理中心</el-menu-item>
                <el-menu-item index="3">处理中心</el-menu-item>
                <div style="float: right;position: relative;top: 10px;margin-right: 30px">
                    <el-input  placeholder="请输入搜索内容" >
                        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                    </el-input>
                </div>
            </el-menu>
        </div>

    </el-header>
    <el-card style=";width: 1105px;margin: 100px auto ;
                background-color: white">
        <p>订单编号：</p>
        <el-table
                :data="tableData"
                style="width: 1080px;">
            <el-table-column
                    prop="id"
                    label="订单编号"
                    width="75">
            </el-table-column>
            <el-table-column
                    prop="bookName"
                    label="内容"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="订单价格"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="receiverName"
                    label="收货人"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="receiverAddress"
                    label="收货人地址"
                    width="230">
            </el-table-column>
            <el-table-column
                    prop="receiverPhone"
                    label="收货人电话"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="payState"
                    label="订单状态"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="orderTime"
                    label="下单时间"
                    width="120">
            </el-table-column>
        </el-table>
        <el-button style="position: relative " type="success" plain id="pay">去支付</el-button>
    </el-card>
    <el-footer>
        <img style="width: 100%;height: 50px" src="imgs/foot.jpg" alt="">
        <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
            <p>Copyright @ 重庆互联网学院 重庆市渝北区华山南路  JSD2207
            </p>
            <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        </div>
    </el-footer>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex: '1',
                tableData: [{
                    id:'1',
                    bookName:'我与蠢货的区别',
                    money:111,
                    receiverName:'南街旧巷',
                    receiverAddress:'滨江公园',
                    receiverPhone:'17387473827',
                    payState:'未支付',
                    orderTime: '2022-05-03'
                }]
            }
        },
       methods:{
           handleSelect(key, keyPath) {
               console.log(key, keyPath);
           },
       }
    })
</script>
</html>